<template>
    <view>
<!--        <view style="position: fixed; z-index: -999; width: 100%; height: 100vh;" :style="{background: bgColor}">-->
<!--            <image style="width: 100%; height: 100%; " mode="scaleToFill" src="../../static/images/bg.png"/>-->
<!--        </view>-->
        <view style="width: 100%; position: fixed;  top: 0; z-index: 999; transition: all .3s;" :style="{background: titleBg}">
            <!-- 状态栏 -->
            <view :style="{height: safeAreaInsets.top + 'px'}"/>
            <view class="title" @click="onGoBack()">
                <view v-if="canBack" style="margin-right: 10rpx">
                    <u-icon name="arrow-left" color="#333" size="36rpx" :bold="true"/>
                </view>
                <view>{{ title }}</view>
            </view>
        </view>

        <!-- 等高元素，防止塌陷 -->
        <view :style="{height: safeAreaInsets.top + 44 + 'px'}"/>
    </view>
</template>

<script>
import {confirmYes, debounce} from "@/utils/PrjUtils";

export default {
    name: "MyNavbar",
    props: {
        title: {
            type: String,
            required: true,
            default: '新页面'
        },
        canBack: {
            type: Boolean,
            required: false,
            default: false
        },
        bgColor: {
            type: String,
            required: false,
            default: '#fff'
        },
        titleBg: {
            type: String,
            required: false,
            // default: 'rgba(0,0,0,0)'
            default: '#FFF'
        }
    },
    data() {
        return {
            safeAreaInsets: {},
        }
    },
    beforeMount() {
        uni.getSystemInfo({
            success: (res) => {
                this.safeAreaInsets = res.safeAreaInsets
            }
        })
    },
    created() {

    },
    methods: {
        // 返回上一页
        onGoBack() {
            if (!this.canBack) return
            if (getCurrentPages().length === 1) {
                confirmYes('上个页面已失效，是否返回至登录页面？', () => {
                    uni.reLaunch({
                        url: '/pages/login/login'
                    })
                })
            } else {
                uni.navigateBack();
            }
        }
    }
}
</script>

<style lang="scss">

.title {
    display: flex;
    align-items: center;
    height: 44px;
    line-height: 44px;
    font-weight: 600;
    font-size: 36rpx;
    padding-left: 40rpx;
    color: #333;
}
</style>
